import React from "react";
import { Comment, Tooltip, List } from "antd";
import moment from "moment";

export default function UserComment() {
  const data = [
    {
      actions: [<span key="comment-list-reply-to-0">Reply to</span>],
      author: "周旭彬",
      avatar: "https://joeschmoe.io/api/v1/random",
      content: (
        <p>
          广州白云一条街，打听打听谁是爹！
        </p>
      ),
      datetime: (
        <Tooltip
          title={moment().subtract(1, "days").format("YYYY-MM-DD HH:mm:ss")}
        >
          <span>{moment().subtract(1, "days").fromNow()}</span>
        </Tooltip>
      ),
    },
    {
      actions: [<span key="comment-list-reply-to-0">Reply to</span>],
      author: "苏伟",
      avatar: "https://joeschmoe.io/api/v1/random",
      content: (
        <p>
          问君能有几多愁，恰似一壶二锅头！
        </p>
      ),
      datetime: (
        <Tooltip
          title={moment().subtract(2, "days").format("YYYY-MM-DD HH:mm:ss")}
        >
          <span>{moment().subtract(2, "days").fromNow()}</span>
        </Tooltip>
      ),
    },
  ];
  return (
    <div id="comment">
      <List
        className="comment-list"
        header={`${data.length} 条热门评论`}
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item) => (
          <li>
            <Comment
              actions={item.actions}
              author={item.author}
              avatar={item.avatar}
              content={item.content}
              datetime={item.datetime}
            />
          </li>
        )}
      />
    </div>
  );
}
